<template>
    <a-card :bodyStyle="{ padding: 0 }">
        <span style="font-weight: bold;">当前可用房间:</span>


        <!-- , y: 600 -->
        <a-table ref="table" size="small" :scroll="{ x: 500 }" bordered rowKey="id" :columns="columns"
            :dataSource="dataSource" :pagination="false" :loading="loading" class="j-table-force-nowrap"
            @change="handleTableChange"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelect: handleSelectRow, columnTitle: ' ' }">
            <div slot="roomCode" slot-scope="text, record"
                style="display: flex; align-items: center; justify-content: center;">
                {{ record.roomCode }}
                <div v-if="record.roomState" :style="getBackgroundColor(record.roomState)"
                    style="width: 15px; height: 15px; border-radius: 100%; margin: auto 5px;">
                </div>
                <div v-if="record.roomState" :style="getBackgroundColor(record.roomMg)"
                    style="width: 15px; height: 15px; border-radius: 100%;">
                </div>
            </div>
        </a-table>
        <!-- <example style="bottom: 0;" /> -->
    </a-card>
</template>

<script>
import { getAction } from '@/api/manage'
import { KfStyleSettingMixin } from '@/views/PmsKF/KfStyleSetting/KfStyleSetting'
// import { KfStyleSettingMixin } from '../../../../../KfStyleSetting/KfStyleSetting'
// import example from '../../../../FT/example'

export default {
    name: 'RoomList',
    mixins: [KfStyleSettingMixin],
    // components: {
    //     example,
    // },
    props: {
        yudingdan: {
            type: Object,
            required: true,
        },
        disabled: {
            type: Boolean,
            default: false,
            required: false
        },
    },
    data() {
        return {
            dataSource: [],
            loading: false,
            selectedRowKeys: [],
            selectionRows: [],
            ipagination: {
                current: 1,
                pageSize: 9999,
            },
            // queryParam: {
            //     dateArrival: this.checkDateArrival,
            //     dateDeparture: this.checkDateDeparture,
            //     // id: this.yudingdan.bookCode || 'NoFan'
            // },
            isorter: {
                column: 'roomCode',
                order: 'asc',
            },
            url: {
                list: '/room/roomInfo/queryUsableRoomList',
            },

        }
    },
    computed: {
        columns() {
            return [
                {
                    title: '#',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 40,
                    align: "center",
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '房间号',
                    align: "center",
                    dataIndex: 'roomCode',
                    scopedSlots: { customRender: 'roomCode' },
                },
                {
                    title: '房间类型',
                    align: "center",
                    dataIndex: 'roomTypeCode_dictText',
                    // filters: this.filterData,
                    // onFilter: (value, record) => record.roomTypeCode.indexOf(value) === 0,
                },
                {
                    title: '楼层',
                    align: "center",
                    dataIndex: 'roomLevelCode_dictText'
                },
                {
                    title: '房间描述',
                    align: "center",
                    dataIndex: 'roomDesc'
                },
            ]
        },
        filterData() {
            const fd = []
            this.dataSource.forEach(item => {
                fd.push({
                    text: item.roomTypeCode_dictText,
                    value: item.roomTypeCode,
                })
            })
            const trueFD = []
            fd.forEach(item => {
                if (trueFD.some(i => i.value === item.value)) { } else {
                    trueFD.push(item)
                }
            })
            return trueFD
        },
    },
    methods: {
        handleTableChange(pagination, filters, sorter) {
            //分页、排序、筛选变化时触发
            //TODO 筛选
            console.log(pagination)
            if (Object.keys(sorter).length > 0) {
                this.isorter.column = sorter.field;
                this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
            }
            this.ipagination = pagination;
            this.loadData();
        },
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        handleSelectRow(record, selected, selectedRows) {
            let obj = {
                record: record,
                selected: selected,
                selectedRows: selectedRows
            }
            this.$emit('selectRooms', obj)
        },
        loadData(checkDateArrival, checkDateDeparture, checkRoomType) {
            console.log(checkDateArrival, checkDateDeparture, checkRoomType, '==========')
            this.loading = true;
            getAction(this.url.list, {
                dateArrival: checkDateArrival,
                dateDeparture: checkDateDeparture,
                roomTypeCode: checkRoomType,
                pageNo: 1,
                pageSize: 99999,
                order: 'asc',
                column: 'roomCode',
            }).then((res) => {
                if (res.success) {
                    this.dataSource = res.result.records || res.result;
                    if (res.result.total) {
                        this.ipagination.total = res.result.total;
                    } else {
                        this.ipagination.total = 0;
                    }
                } else {
                    this.$message.warning(res.message)
                }
            }).finally(() => {
                this.loading = false
            })
        },
    }
}
</script>